﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
    <link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="Content/ui.textbox.css" type="text/css" rel="stylesheet" media="all" />
    <link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
    <link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
    <link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="Scripts/ui.textbox.js" type="text/javascript"></script>
    <script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>
<!-- InstanceBeginEditable name="pageStyles" -->
<style type="text/css">
    .message
    {
        clear: both;
        margin-bottom: 40px;
    }
    div.message div.avatar
    {
        float: left;
        width: 55px;
    }
    div.message div.meta
    {
        color: #666666;
        font-size: 10px;
        margin: 5px 0;
    }
    div.message h1 a.needConfirm
    {
        color: red;
        text-decoration: none;
        font-size: 18px;
    }
    
    div.message h1 a.notNeedConfirm
    {
        color: #000000;
        text-decoration: none;
        font-size: 18px;
    }
    div.message div.content
    {
        margin-left: 65px;
    }
    div.formatted_text_body.rich_text
    {
        margin-bottom: 10px;
    }
    
    div.formatted_text_body
    {
        font-size: 13px;
        line-height: 1.425em;
    }
</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="pageScripts" -->
<script src="Scripts/jquery.quickpaginate.js" type="text/javascript"></script>
<script type="text/javascript">
    //************* URL常量
    //************* 全局变量
    var g_Var = {
        "messageTable": null

    };
    //************* 常量定义
    var StaticResource = {
};


//************* Accessor访问器
var EzAccessor = {};

if (ezmock.IS_MOCKED) {
    var mock_json =
	        [{
	            "MessageId": "33333",
	            "NeedConfirm": true,
	            "HasConfirmed": false,
	            "Participator": {
	                "AllUserMemebers":
                        [
                            { 'Id': '1111', 'Name': '何静' },
                            { 'Id': '2222', 'Name': '张璐' }
                        ]
	            },
	            "CreateOn": "1348423559",
	            "MessageTitle": "大集合",
	            "MessageText": '2010年3月，美丽开始做DOTA的解说'
	        },
            {
                "MessageId": "44444",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "Participator": {
                    "AllUserMemebers":
                        [
                            { 'Id': '1111', 'Name': '何静' },
                            { 'Id': '2222', 'Name': '张璐' }
                        ]
                },
                "CreateOn": "1348423559",
                "MessageTitle": "迅雷电影",
                "MessageText": '慢慢进入大家的视线。'
            },
            {
                "MessageId": "555555",
                "NeedConfirm": true,
                "HasConfirmed": false,
                "Participator": {
                    "AllUserMemebers":
                        [
                            { 'Id': '1111', 'Name': '何静' },
                            { 'Id': '2222', 'Name': '张璐' }
                        ]
                },
                "CreateOn": "1348423559",
                "MessageTitle": "",
                "MessageText": '8月的尾巴了'
            },
            {
                "MessageId": "44444",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "Participator": {
                    "AllUserMemebers":
                        [
                            { 'Id': '1111', 'Name': '何静' },
                            { 'Id': '2222', 'Name': '张璐' }
                        ]
                },
                "CreateOn": "1348423559",
                "MessageTitle": "小脚裤",
                "MessageText": '2010最新杨丞琳/江若琳《童眼》DVD粤语中字。'
            },
            {
                "MessageId": "44444",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "Participator": {
                    "AllUserMemebers":
                        [
                            { 'Id': '1111', 'Name': '何静' },
                            { 'Id': '2222', 'Name': '张璐' }
                        ]
                },
                "CreateOn": "1348423559",
                "MessageTitle": "",
                "MessageText": '2010最新爱情喜剧《老虎都要嫁》DVD中字。'
            },
            {
                "MessageId": "44444",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "Participator": {
                    "AllUserMemebers":
                        [
                            { 'Id': '1111', 'Name': '何静' },
                            { 'Id': '2222', 'Name': '张璐' }
                        ]
                },
                "CreateOn": "1348423559",
                "MessageTitle": "保暖雪地靴",
                "MessageText": '2010最新爱情喜剧《老虎都要嫁》DVD中字。'
            }];

    var mockEzAccessor = {
        'getMessageList': function () {
            return mock_json;
        },
        'getCurrentUser': function () {

        },
        'doShowMessage': function (id) {
            alert(id);
        }
    };
    EzAccessor = mockEzAccessor;
} else {
    var realEzAccessor = {
        'getMessageList': function () {
            //return  <%= ViewData["Outbox"] %>;
        },

        'getCurrentUser': function () {
            //return <%= ViewData["CurrentUser"] %>;
        },

        'doShowMessage': function (messageId) {

            window.location.href = "show?TopicId=" + messageId;
        }
    };
    EzAccessor = realEzAccessor;
}

function quickPage() {
    $("#cmbOutBox .message").quickpaginate({ perpage: 3, showcounter: true, pager: $("#pageCount") });
}

function bindOutboxMessageList(messageList) {
    if (messageList.length != 0) {
        var messageOutDom = $('<div id="cmbOutBox"></div>');

        for (var key in messageList) {

            //接受者
            var nameList = "";
            var number = 0;
            for (var man in messageList[key].Participator.AllUserMemebers) {
                var receiverMember = messageList[key].Participator.AllUserMemebers;
                if (man < 2) {
                    nameList = nameList + receiverMember[man].Name + " ";
                }
                else {
                    number = man;
                }
            }
            if (number >= 2) {
                nameList = nameList + "等";
            }

            //时间
            var time = Date.fromEpoch(messageList[key].CreateOn);
            var createOn = time.toChineseDateFormat() + " " + time.toFullTimeFormat();

            var reciverDom = '<div class="meta">收件人: {nameList}  {createOn}</div>';
            reciverDom = reciverDom.replace("{nameList}", nameList)
                                   .replace("{createOn}", createOn);

            //消息标题
            var title = messageList[key].MessageTitle;
            if (title.length == 0) {
                title = "无标题";
            }
            var titleDom = '<h1> <a class="{titleClass}" onclick="readMessage(\'{topicId}\')">{title}</a></h1>';
            titleDom = titleDom.replace("{topicId}", messageList[key].MessageId)
                               .replace("{title}", title);

            //是否需要确认
            var isNeedConfirm = messageList[key].NeedConfirm;
            if (isNeedConfirm == true) {
                titleDom = titleDom.replace("{titleClass}", "needConfirm");
            } else {
                titleDom = titleDom.replace("{titleClass}", "notNeedConfirm");
            }

            //消息内容
            var content = messageList[key].MessageText;
            //todo:
            //做删减处理
            var contentDom = '<div class="formatted_text_body"><div>{content}</div></div>';
            contentDom = contentDom.replace("{content}", content);

            //消息链接
            var aLinkDom = '<a onclick="readMessage(\'{topicId}\')";>详细</a>';
            aLinkDom = aLinkDom.replace("{topicId}", messageList[key].MessageId);

            var messageDom = $('<div class="message"></div>');

            $(messageDom).append(reciverDom)
                         .append(titleDom)
                         .append(contentDom)
                         .append(aLinkDom);


            $(messageOutDom).append(messageDom);
        }

        $('#messageOutbox').append(messageOutDom);
    }
    else {
        var noMessageDom = '<div style="text-align:center">没有消息</div>';
        $('#messageOutbox').append(noMessageDom);
    }

}

function readMessage(messageId) {
    EzAccessor.doShowMessage(messageId);
}


function deleMessage(id) {
    //增添tips
    var deletInfo = '<p>你确定要删除这条消息吗？</p><input type="button" id="delete" value="删除"/><input type="button" id="cancel" value="取消"/>';

    //去除已有的tips
    $('.tip-yellow').remove();

    $('#' + id).poshytip({
        content: deletInfo,
        showOn: 'focus',
        alignTo: 'target',
        alignX: 'left',
        alignY: 'center',
        offsetX: 5
    });

    $('#' + id).poshytip('show');

    //取消删除
    $('#cancel').click(function () {
        $('.tip-yellow').remove();

    });

    //确定删除
    $('#delete').click(function () {
        $('.tip-yellow').remove();

        var messageTr = $('#' + id).parent().parent();
        var position = g_Var['messageTable'].fnGetPosition(messageTr[0]);
        g_Var['messageTable'].fnDeleteRow(position);

    })

}


function initPage() {
    EzTipsManager.addTipBox('#tip_Remind', 'tipRemind');
    EzTipsManager.addTipBox('#tip_inbox', 'tipInbox');

    EzTipsManager.showTipBox('tipRemind');
    EzTipsManager.showTipBox('tipInbox');

    var messageList = EzAccessor.getMessageList();
    bindOutboxMessageList(messageList);
    quickPage();
}


function initPageEvent() {
    $('#inbox').click(function () {
        window.location.href = "/message/inbox";
    });
}
$(function () {
    initPage();
    initPageEvent();
});
</script>
<!-- InstanceEndEditable -->
<body>
    <div id="root">
        <div id="headw">
            <div id="head">
                <!-- InstanceBeginEditable name="pageHead" -->
                <p>
                    早上好，杨裕欣(软件工程部)
                </p>
                <div id="status-bar">
                    <span><a href="#">设置</a></span>&nbsp; 魏玛软件出品
                </div>
                <!-- InstanceEndEditable -->
            </div>
        </div>
        <div id="main">
            <div id="contentw">
                <div id="content-page">
                    <!-- InstanceBeginEditable name="pageContent" -->
                    <div id="page-head">
                        <img src="Content/icons/message_outbox.png" style="width: 48px; height: 48px;" alt="outbox" />
                        <span>我发出的消息</span>
                    </div>
                    <div id="page-body">
                        <div id="messageOutbox">
                        </div>
                    </div>
                    <div class="page-submit">
                        <div id="pageCount">
                        </div>
                    </div>
                    <!-- InstanceEndEditable -->
                </div>
                <div id="content-foot">
                    <small>这个是内容下面的脚注</small></div>
            </div>
            <div id="tipsw">
                <!-- InstanceBeginEditable name="pageShortcut" -->
                <div id="shortcuts" class="box">
                    <a class="btn-shortcut" href="/message/send">写新消息</a>
                </div>
                <!-- InstanceEndEditable -->
                <div id="tips" class="box">
                </div>
            </div>
            <div class="clearfloat">
            </div>
        </div>
    </div>
    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_Remind" style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
            消息为红色的标题，说明您希望接受者在查阅过该消息后，予以确认。
        </p>
    </div>
    <div id="tip_inbox" style="display: none;">
        <h1>
            <img src="Content/icons/message_inbox.png" style="width: 48px; height: 48px;" alt="inbox" /><a
                id="inbox">我收到的消息</a>
        </h1>
    </div>
    <!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
